<template>
  <div class="about-dialog-wrapper">
    <el-dialog
      v-model="dialogVisible"
      title="关于我们"
      width="500px"
      @close="handleDialogClose"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      center>
      <div class="about-content">
        <div class="company-info">
          <h3>{{ companyName }}</h3>
          <p>{{ companyDescription }}</p>
        </div>
        
        <!-- 版本信息部分 -->
        <div class="version-info-section" style="text-align: center;">
          <div class="version-text">当前版本: {{ currentVersion }}</div>
        </div>

        <!-- 二维码部分 - 使用Element Plus的Image组件 -->
        <div class="qr-code">
          <el-image 
            :src="qrCodeImageUrl" 
            fit="cover"
            :preview-src-list="[qrCodeImageUrl]"
            :initial-index="0"
            preview-teleported
            class="qr-code-image"
            :preview-options="{
              zIndex: 3100,
              closeOnPressEscape: true,
              wheelZoom: true
            }"
            alt="扫码关注我们">
            <template #error>
              <div class="image-error">
                <el-icon><Picture /></el-icon>
                <div>加载失败</div>
              </div>
            </template>
          </el-image>
          <p>扫码关注我们</p>
        </div>
        
        <div class="copyright">
          <p>Copyright © {{ copyrightYear }} {{ companyName }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Picture } from '@element-plus/icons-vue';

export default {
  name: 'AboutUs',
  components: {
    Picture
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    companyName: {
      type: String,
      required: true
    },
    companyDescription: {
      type: String,
      required: true
    },
    qrCodeImageUrl: {
      type: String,
      required: true
    },
    copyrightYear: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      // 获取package.json中的版本号
      currentVersion: import.meta.env.VITE_APP_VERSION || '1.0.0'
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(newValue) {
        console.log('AboutUs: visible prop changed:', newValue);
        this.dialogVisible = newValue;
      }
    },
    dialogVisible(newValue) {
      console.log('AboutUs: dialogVisible changed:', newValue);
      if (!newValue) {
        this.$emit('update:visible', false);
      }
    }
  },
  mounted() {
    console.log('AboutUs mounted, visible:', this.visible);
  },
  methods: {
    // 处理对话框关闭
    handleDialogClose() {
      console.log('AboutUs: 关闭对话框');
      this.dialogVisible = false;
      this.$emit('update:visible', false);
    }
  }
}
</script>

<style lang="scss" scoped>
.about-dialog-wrapper {
  .about-content {
    text-align: center;
    padding: 20px;

    .company-info {
      margin-bottom: 30px;
      
      h3 {
        font-size: 20px;
        margin-bottom: 15px;
      }
      
      p {
        color: #666;
        line-height: 1.6;
      }
    }

    .version-info-section {
      margin-bottom: 30px;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      padding: 15px;
      background-color: #f9f9f9;
      
      .version-text {
        color: #666;
        font-size: 13px;
      }
    }

    .qr-code {
      margin-bottom: 30px;
      
      .qr-code-image {
        width: 150px;
        height: 150px;
        margin-bottom: 10px;
        border-radius: 4px;
        cursor: pointer;
        transition: transform 0.3s;
        
        &:hover {
          transform: scale(1.05);
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
      }
      
      p {
        color: #666;
      }

      .image-error {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background-color: #f5f7fa;
        color: #909399;
        
        .el-icon {
          font-size: 24px;
          margin-bottom: 8px;
        }
      }
    }

    .copyright {
      color: #999;
      font-size: 12px;
    }
  }
}

// 对话框样式调整
:deep(.el-dialog) {
  margin-top: 15vh !important;
}
</style>